Brauzer kengaytmasi kontent skriptlari: JavaScript izolyatsiyasi va kommunikatsiya

Brauzer kengaytmalari veb-brauzerlarning funksionalligini oshirib, foydalanuvchilarga moslashtirilgan tajribalar va soddalashtirilgan ish jarayonlarini taklif etadi. Ko‘pgina kengaytmalarning markazida veb-sahifalarga DOM (Hujjat Ob'ekt Modeli) bilan o‘zaro ishlash uchun kiritiladigan JavaScript fayllari bo‘lgan kontent skriptlari yotadi. Ushbu skriptlarning qanday ishlashini, xususan, ularning xost-sahifadan izolyatsiyasini va aloqa usullarini tushunish, mustahkam va xavfsiz kengaytmalarni ishlab chiqish uchun juda muhimdir.

Kontent skriptlari nima?

Kontent skriptlari ma'lum bir veb-sahifa kontekstida ishlaydigan JavaScript fayllaridir. Ular sahifaning DOMiga kirish huquqiga ega bo'lib, uning mazmunini o'zgartirish, yangi elementlar qo'shish va foydalanuvchi harakatlariga javob berish imkonini beradi. Oddiy veb-sahifa skriptlaridan farqli o'laroq, kontent skriptlari brauzer kengaytmasining bir qismi bo'lib, odatda brauzer kengaytmasi freymvorki tomonidan yuklanadi va bajariladi.

Amaliy misol sifatida veb-sahifadagi ma'lum kalit so'zlarni avtomatik ravishda belgilaydigan brauzer kengaytmasini keltirish mumkin. Kontent skripti ushbu kalit so'zlarni DOM ichida aniqlaydi va ularni ajratib ko'rsatish uchun uslublarni qo'llaydi. Yana bir misol - bu foydalanuvchi tanlagan til asosida sahifadagi matnni tarjima qilingan versiyalari bilan almashtiradigan tarjima kengaytmasi. Bular shunchaki oddiy misollar; imkoniyatlar deyarli cheksizdir.

JavaScript izolyatsiyasi: "Sandbox"

Kontent skriptlari ko'pincha "JavaScript sandbox'i" deb ataladigan qisman izolyatsiyalangan muhitda ishlaydi. Bu izolyatsiya xavfsizlik va barqarorlik uchun juda muhimdir. Agar u bo'lmasa, kontent skriptlari xost-sahifaning skriptlariga xalaqit berishi yoki sahifaga kiritilgan zararli kod tomonidan buzilishi mumkin.

Izolyatsiyaning asosiy jihatlari:

• O'zgaruvchilarning ko'rinish doirasi: Kontent skriptlari va veb-sahifa skriptlari alohida global ko'rinish doiralariga ega. Bu shuni anglatadiki, kontent skriptida aniqlangan o'zgaruvchilar va funksiyalar veb-sahifa skriptlari uchun to'g'ridan-to'g'ri mavjud emas va aksincha. Bu nomlashdagi ziddiyatlar va kutilmagan o'zgartirishlarning oldini oladi.
• Prototip ifloslanishini yumshatish: Zamonaviy brauzerlar prototip ifloslanishi hujumlarini yumshatish uchun usullarni qo'llaydi, bunda zararli skriptlar zaifliklarni kiritish uchun o'rnatilgan JavaScript ob'ektlarining prototiplarini (masalan, `Object.prototype`, `Array.prototype`) o'zgartirishga harakat qiladi. Kontent skriptlari bu himoyadan foydalanadi, garchi ishlab chiquvchilar hali ham hushyor bo'lishlari kerak.
• Shadow DOM (ixtiyoriy): Shadow DOM DOM daraxtining bir qismini inkapsulyatsiya qilish mexanizmini ta'minlaydi, bu esa soya ildizidan tashqaridagi uslublar va skriptlarning ichidagi elementlarga ta'sir qilishini va aksincha, oldini oladi. Kengaytmalar o'zlarining UI elementlarini xost-sahifadan yanada izolyatsiya qilish uchun Shadow DOMdan foydalanishlari mumkin.

Misol: `myVariable` nomli o'zgaruvchini aniqlaydigan kontent skriptini ko'rib chiqaylik. Agar veb-sahifa ham xuddi shu nomdagi o'zgaruvchini aniqlasa, ziddiyat bo'lmaydi. Har bir o'zgaruvchi o'zining ko'rinish doirasida mavjud bo'ladi.

Kommunikatsiya: Bo'shliqni to'ldirish

Izolyatsiya muhim bo'lsa-da, kontent skriptlari ma'lumotlarni saqlash, tashqi API'larga kirish yoki boshqa brauzer xususiyatlari bilan ishlash kabi vazifalarni bajarish uchun ko'pincha kengaytmaning fon skripti bilan aloqa o'rnatishi kerak. Kontent skriptlari va fon skriptlari o'rtasida aloqa o'rnatish uchun bir nechta mexanizmlar mavjud.

Xabar uzatish: Asosiy kommunikatsiya kanali

Xabar uzatish - bu kontent skriptlari va fon skriptlari uchun ma'lumotlar va buyruqlar almashishning eng keng tarqalgan va tavsiya etilgan usuli. Buning uchun `chrome.runtime.sendMessage` va `chrome.runtime.onMessage` API'lari (yoki ularning brauzerga xos ekvivalentlari) ishlatiladi.

Xabar uzatish qanday ishlaydi:

1. Xabar yuborish: Kontent skripti fon skriptiga xabar yuborish uchun `chrome.runtime.sendMessage` dan foydalanadi. Xabar har qanday JavaScript ob'ekti bo'lishi mumkin, jumladan, satrlar, raqamlar, massivlar va ob'ektlar.
2. Xabar qabul qilish: Fon skripti `chrome.runtime.onMessage` yordamida xabarlarni tinglaydi. Xabar kelganda, qayta chaqiruv funksiyasi bajariladi.
3. Xabarga javob berish: Fon skripti ixtiyoriy ravishda qayta chaqiruvga taqdim etilgan `sendResponse` funksiyasi yordamida kontent skriptiga javob yuborishi mumkin.

Misol:

Kontent skripti (content.js):

            
chrome.runtime.sendMessage({action: "getData"}, function(response) {
  console.log("Ma'lumotlar qabul qilindi: ", response);
  // Qabul qilingan ma'lumotlarni qayta ishlash
});

            

              
                Copy
              
            
          

Fon skripti (background.js):

            
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.action == "getData") {
      // Ma'lumotlarni API yoki mahalliy saqlash omboridan olish
      let data = {value: "Fon skriptidan olingan ba'zi ma'lumotlar"};
      sendResponse(data);
    }
    return true; // Javob asinxron tarzda yuborilishini bildirish
  }
);

            

              
                Copy
              
            
          

Ushbu misolda kontent skripti fon skriptiga ma'lumot so'rab xabar yuboradi. Fon skripti ma'lumotlarni oladi va uni kontent skriptiga qaytarib yuboradi. `onMessage` tinglovchisidagi `return true;` asinxron javoblar uchun juda muhimdir.

DOMga to'g'ridan-to'g'ri kirish (Kamroq tarqalgan, ehtiyotkorlikni talab qiladi)

Xabar uzatish afzal ko'rilgan usul bo'lsa-da, kontent skriptlari xost-sahifaning DOMiga to'g'ridan-to'g'ri kirishi yoki uni o'zgartirishi kerak bo'lgan holatlar mavjud. Biroq, bu yondashuv ziddiyatlar va xavfsizlik zaifliklari ehtimoli tufayli ehtiyotkorlik bilan ishlatilishi kerak.

DOMga to'g'ridan-to'g'ri kirish usullari:

• To'g'ridan-to'g'ri DOM manipulyatsiyasi: Kontent skriptlari sahifa tuzilishi va tarkibini o'zgartirish uchun standart JavaScript DOM manipulyatsiyasi usullaridan (masalan, `document.getElementById`, `document.createElement`, `element.appendChild`) foydalanishi mumkin.
• Hodisa tinglovchilari: Kontent skriptlari foydalanuvchi harakatlari yoki boshqa hodisalarga javob berish uchun DOM elementlariga hodisa tinglovchilarini biriktirishi mumkin.
• Skriptlarni kiritish: Kontent skriptlari kodni to'g'ridan-to'g'ri sahifa kontekstida bajarish uchun sahifaga `